<template>
  <div class="center-content">
    <div class="top-component">
      <!-- 上组件内容 -->
      <CenterTop />
    </div>
    <div class="bottom-component">
      <!-- 下组件内容 -->
      <CenterBottom />
    </div>
  </div>
</template>

<script>
import CenterTop from './CenterTop.vue';
import CenterBottom from './CenterBottom.vue';

export default {
  name: 'Center',
  components: {
    CenterTop,
    CenterBottom
  }
}
</script>

<style scoped>
.center-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.top-component {
  height: 60%;
}


.bottom-component {
  height: 40%;
}
</style> 